/**
 * 管理首页
 */
import React, { Component } from 'react'
import './Home.scss';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';

// 引入折线图
import 'echarts/lib/chart/line';

// 引入柱状图
import 'echarts/lib/chart/bar';

// 引入饼状图
import 'echarts/lib/chart/pie';

// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';

//引入图片库
import imagesStore from '../../assets/lib/imagesStore';

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            //条形表格
            goodsChart: null,
            //饼图
            pieChart: null,
            //线条
            lineChart: null,
            //数量
            arr1:[],
            //品牌名称
            brand: [],
            //商品数量
            quantity: [],
        };
        //创建一个ref存储下方绑定的DOM元素
        this.goodsBar = React.createRef();
        this.goodsline = React.createRef();
        this.goodspie = React.createRef();
    }

    componentDidMount() {
         //加延时函数 才可以加载图表出来
        setTimeout(() => {
            //初始化图表对象
            this.setState({
                //要声明我们通过 "current"属性 来访问 DOM 节点
                //条形图表
                goodsChart: echarts.init(this.goodsBar.current),
                //饼状图表
                pieChart: echarts.init(this.goodspie.current),
                //折线图表
                lineChart: echarts.init(this.goodsline.current),
            });
            //请求全部数据
            React.axios
                .get("/store-manage/gw1901/goods-manage-g4/goods-info.php")
                .then((res) => {
                    // 商品名称
                    const storeName = res.data.map((ele) => ele.goodsName);
                    // 商品数据
                    const quantity = res.data.map((ele) => ele.quantity);
                    
                    //家居家装 / 家用纺织
                    const spinning=res.data.filter(function(ele) {
                        return ele.category==="家居家装 / 家用纺织";  
                    })                                
                    //数码电器 / 办公用品
                    const appliance=res.data.filter(function(ele) {
                        return ele.category==="数码电器 / 办公用品";  
                    })  
                    //食品饮料 / 厨房用品
                    const drinks=res.data.filter(function(ele) {
                        return ele.category==="食品饮料 / 厨房用品";  
                    })  
                    //服装饮料/厨房用品
                    const clothing=res.data.filter(function(ele) {
                        return ele.category==="服装鞋包 / 化妆洗护";  
                    })  
                    //汽车配件/汽车用品
                    const automobile=res.data.filter(function(ele) {
                        return ele.category==="汽车配件 / 汽车用品";  
                    })  
                    //运动户外/文娱艺术
                    const exercise=res.data.filter(function(ele) {
                        return ele.category==="运动户外 / 文娱艺术";  
                    })  
                    //其他分类
                    const others=res.data.filter(function(ele) {
                        return ele.category==="其它分类";  
                    }) 
                    //钟表珠宝/计生医疗
                    const timepiece=res.data.filter(function(ele) {
                        return ele.category==="钟表珠宝 / 计生医疗";  
                    })           
                    ////获取表格数据
                    this.setState({
                        brand: res.data,
                        quantity,
                    });

                 //for循环为柱状图添加前八项
                    for(var i=0; i<8; i++) {
                        this.state.arr1.push(res.data[i].brand)
                    }
                    console.log(this.state.arr1)
                
                //由于上方的setState在这里是异步的，所以这里需要用他的函数形式来保证状态的获取返回对象
                // 否则就会显示goodsChart为null
                this.setState((state) => {
                    
                    //绘制条形图
                    state.goodsChart.setOption({
                        //标题
                        title: {
                            text: "最新商品入库统计",
                            textStyle: {
                                fontSize: 20,
                                fontWeight: "lighter",
                                color: "rgb(174,140,88)"
                            },
                        },
                        //鼠标悬浮信息
                        tooltip: {},
                        //x轴
                        xAxis: {
                            data: state.arr1,
                            fontSize:12,
                            axisLabel:{
                                //这里的show用于设置是否显示x轴下的字体 默认为true
                                show:true,  
                                //可以设置成0强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，
                                //如果值为 2，表示隔两个标签显示一个标签，以此类推。
                    　　　　　   interval:0,  
                                //textStyle里面写x轴下的字体的样式
                    　　　　　   textStyle:{   
                                    color:'blue',
                                    fontSize:13
                                }
                        },
                        },
                        //y轴
                        yAxis: {},
                        //系列信息
                        series: [{
                            name: '入库数量',
                            type: 'bar',
                            data:  this.state.quantity,
                            itemStyle: {
                                normal: {
                                    // 每个柱子的颜色则为colorList数组里的一项，如果柱子数目多于colorList
                                    // 的长度，则柱子颜色循环使用该数组
                                    color: function (params) {
                                        var colorList = ['rgb(245,9,88)', 'rgb(42,170,227)', 'rgb(432,170,227)', 'rgb(187,170,227)', 'rgb(80,170,227)', 'rgb(142,170,227)','rgb(14,170,227)','rgb(142,17,227)','rgb(142,170,22)','rgb(142,10,227)','rgb(42,170,227)']
                                        return colorList[params.dataIndex];
                                    }
                                }
                            },
                        }]
                    });
                    window.onresize = state.goodsChart.resize;

                    // 绘制饼状图图表
                    state.pieChart.setOption({
                        //标题
                        title: {
                            text: "商品种类占比",
                            textStyle: {
                                fontSize: 20,
                                fontWeight: "lighter",
                                color: "rgb(174,140,88)",
                            },
                        },
                        //鼠标悬浮信息
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)",
                        },

                        //图注
                        legend: {
                            orient: "vertical",
                            left: "left",
                            top: "20%",
                            itemHeight: 10,
                            data: ["家居家装 / 家用纺织","数码电器 / 办公用品","食品饮料 / 厨房用品","服装鞋包 / 化妆洗护","汽车配件 / 汽车用品","运动户外 / 文娱艺术","钟表珠宝 / 计生医疗","其他分类"],
                        },
                        //系列信息
                        series: [
                            {
                                type: "pie",
                                data: [
                                    {
                                        value: spinning.length,
                                        name: "家居家装 / 家用纺织",
                                    },
                                    {
                                        value: appliance.length,
                                        name: "数码电器 / 办公用品",
                                    },
                                    {
                                        value: drinks.length,
                                        name: "食品饮料 / 厨房用品",
                                    },
                                    {
                                        value: clothing.length,
                                        name: "服装鞋包 / 化妆洗护",
                                    },
                                    {
                                        value: automobile.length,
                                        name: "汽车配件 / 汽车用品",
                                    },
                                    {
                                        value: exercise.length,
                                        name: "运动户外 / 文娱艺术",
                                    },
                                    {
                                        value: timepiece.length,
                                        name: "钟表珠宝 / 计生医疗",
                                    },
                                    {
                                        value: others.length,
                                        name: "其他分类",
                                    },
                                ],
                                //鼠标移上去显示的内容
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"   
                                },
                                //文本信息
                                label:{            
                                    normal: {
                                        show: true,
                                        position: 'inside',
                                        //自定义显示格式(b:name, c:value, d:百分比)
                                        formatter: "({d}%)" 
                                    },
                                    textStyle : {                   
                                        align : 'center',
                                        baseline : 'middle',
                                        fontFamily : '微软雅黑',
                                        fontSize : 15,
                                        fontWeight : 'bolder'
                                    },
                                    
                                    },
                                labelLine: {
                                        show: true,
                                        smooth: true,
                                        length: 3
                                    },
                                left:  "25%",
                                top: "8%",
                                width: "68%",
                                formatter: '{b}: {d}'
                                
                            },
                            
                        ],
                    });

                    //绘制折线图
                    state.lineChart.setOption({
                        //背景颜色透明
                        backgroundColor:'',
                        //标题
                        title: {
                            text: "出入库商品数量",
                            textStyle: {
                                fontSize: 20,
                                fontWeight: "lighter",
                                color: "rgb(174,140,88)"
                            },
                        },
                        //图注
                        legend: {
                            top: "8%",
                            itemHeight: 10,
                            data: ["出库", "入库"],
                        },
                        //鼠标悬浮信息
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        //x轴
                        xAxis: {
                            boundaryGap: false,
                            data: state.brand.map(info => info.goodsName)
                        },
                        //y轴
                        yAxis: {},
                        //系列信息
                        series: [
                            {
                                name: "出库",
                                type: "line",
                                areaStyle: {},
                                data: state.brand.map(info => info.quantity-(Math.floor(Math.random() * 10 + 1)))
                            },
                            {
                                name: "入库",
                                type: "line",
                                SreaStyle: {},
                                data: state.brand.map(info => info.quantity)
                            }
                        ],
                    });
                });
            });
        },500);
    }
        

    //渲染界面
    render() {
        return (
            <div className="containerBox">

                {/* 内容标题 */}
                <div className="title2">
                    <img 
                        src={imagesStore.img1} 
                        alt="图片加载中" 
                    />
                    <div className="title-text">
                        <h2>藏经阁图示</h2>
                    </div>
                </div>

                <div className="form">

                    {/*图表*/}
                    <div className="chartData">

                        {/*柱状图*/}
                        <div className="barchart"
                        // 告诉 React 我们想把 <div> ref 关联到 当成一个对象来看待
                            ref={this.goodsBar}
                            style={{
                                width: "450px",
                                height: "420px",
                                marginTop: '50px',
                                backgroundColor:'#c0ebd7',
                                marginLeft:'20PX'
                            }}
                        ></div>

                        {/* 饼状图 */}
                        <div className="pieChart"
                            ref={this.goodspie}
                            style={{
                                width: '700px',
                                height: "420px",
                                marginTop: '50px',
                                backgroundColor:'#3eede7',
                                marginLeft:'20PX'
                            }}
                        ></div>
                    </div>
                    
                    {/* 折线图 */}
                    <div className="lineChart"
                        ref={this.goodsline}
                        style={{
                            width: '1180px',
                            height: '320px',
                            marginTop: '50px',
                            backgroundColor:'#eedeb0',
                            marginLeft:'20PX'
                        }}
                    >
                    </div>
                </div>
            </div>
        )
    }
    }
    